<script lang="ts" setup>
const emit = defineEmits(['reset', 'search'])

const cls = 'ui-search-form'

const onReset = () => emit('reset')

const onSearch = () => emit('search')
</script>

<template>
  <div :class="cls">
    <ElForm :class="`${cls}_form`" inline @submit.prevent>
      <slot />
    </ElForm>
    <div :class="`${cls}_actions`">
      <ElButton type="primary" @click="onSearch">查询</ElButton>
      <ElButton @click="onReset">重置</ElButton>
    </div>
  </div>
</template>

<style lang="scss">
.ui-search-form {
  $pad: 15px;
  display: flex;
  align-items: flex-end;
  margin-bottom: $pad;
  border-bottom: 1px solid var(--el-border-color-lighter);
  &_form {
    flex: 1;
    width: 0;
    .el-form-item {
      margin-right: 10px;
      margin-bottom: $pad !important;
      &__content {
        > .el-date-editor--daterange {
          width: 220px;
        }
        > .el-select {
          min-width: 150px;
        }
        > .el-input {
          width: 150px;
        }
      }
    }
  }
  &_actions {
    margin-bottom: $pad;
  }
}
</style>
